<template>
    <a-modal
            :title="tableTitle"
            :visible="visible"
            width="1200px"
            @ok="handleOk"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-form-model ref="form" :model="form">
            <a-descriptions bordered :column="3">
                <a-descriptions-item label="企业用户">
                    <a-form-model-item
                            prop="userName"
                            :rules="{
                                required: true,
                                message: '请输入企业用户',
                                trigger: 'change',
                            }">
                        <a-input
                                :placeholder="'请输入企业用户'"
                                v-model="form.userName">
                        </a-input>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="登陆名">
                    <a-form-model-item
                            prop="loginUserName"
                            :rules="{
                                required: true,
                                message: '请输入登陆名',
                                trigger: 'change',
                            }">
                        <a-input
                                :disabled="getDisabled(form.id)"
                                :placeholder="'请输入登陆名'"
                                v-model="form.loginUserName">
                        </a-input>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="用户密码">
                    <a-form-model-item
                            prop="loginPassword"
                            :rules="{
                                required: true,
                                message: '请输入用户密码',
                                trigger: 'change',
                            }">
                        <a-input-password
                                :disabled="getDisabled(form.id)"
                                :placeholder="'请输入用户密码'"
                                v-model="form.loginPassword">
                        </a-input-password>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="用户状态">
                    <a-form-model-item
                            prop="loginUserStatus"
                            :rules="{
                                required: true,
                                message: '请选择用户状态',
                                trigger: 'change',
                            }">
                        <a-radio-group v-model="form.loginUserStatus">
                            <a-radio value="1">
                                正常
                            </a-radio>
                            <a-radio value="99">
                                冻结
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="是否内置">
                    <a-form-model-item
                            prop="builtIn"
                            :rules="{
                                required: true,
                                message: '请选择是否内置',
                                trigger: 'change',
                            }">
                        <a-radio-group v-model="form.builtIn">
                            <a-radio :value="true">
                                是
                            </a-radio>
                            <a-radio :value="false">
                                否
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="选择部门">
                    <a-form-model-item
                            prop="departmentIdList"
                            :rules="{
                                required: true,
                                message: '请选择部门',
                                trigger: 'change',
                            }">
                        <a-select
                                v-model="form.departmentIdList"
                                placeholder="请选择部门"
                                showSearch
                                mode="multiple"
                                allowClear>
                            <a-select-option :value="item.id" v-for="(item,index) in departmentData" :key="index">
                                {{item.departmentName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>
            </a-descriptions>
        </a-form-model>
    </a-modal>
</template>

<script>
    import xlDate from '../../../../components/formUntil/xlDate'
    import xlImage from '../../../../components/formUntil/xlImage'
    import icons from '../../../../components/icon/Icons'
    import {departmentList} from "../../../../assets/api";
    import md5 from 'md5'
    export default {
        name: "xlForm",
        data() {
            return {
                tableTitle: '编辑',
                visible: false,
                iconChooseVisible: false,
                confirmLoading: false,
                form: {},
                rules: {},
                departmentData:[]
            }
        },
        components: {
            xlDate,
            xlImage,
            icons
        },
        created(){
            departmentList()
                .then(result=>{
                    this.departmentData = result.result
                })
        },
        methods: {
            handleOk() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.form.loginPassword = md5(this.form.loginPassword)
                        this.confirmLoading = true
                        this.$emit('handleOk', this.form)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCancel() {
                this.visible = false
            },
            formatData() {

            },

            formatForm(form = {}) {
                delete form.createDateTime
                delete form.modifyDateTime
                delete form.modifyBy
                delete form.createBy
                //整理字段数据 ／ 赋值 清空等
                this.form = Object.assign({}, form)
            },
            getDisabled(value){
                if(value){
                    return true
                }else{
                    return false
                }
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/ .ant-form-item {
        margin: 0;
    }

    /deep/ .ant-input-number {
        width: 100%;
    }

    .xl-dateRange {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ant-checkbox-group {
        display: flex;
        flex-wrap: wrap;

        .xl-checkbox {
            display: flex;
            align-items: center;

            /deep/ span:nth-child(2):not(.ant-checkbox-inner) {
                display: flex;
                justify-content: space-between;
                white-space: pre;
            }
        }
    }
</style>
